<template>
  <!-- 2_4项目立项-新增-信息填写 -->
  <div class="common-wrap"
    :class="{margin:isShow}">
    <h3>项目成员</h3>
    <div><span class="importantWarn">*</span>项目负责人</div>
    <a-input placeholder="请输入项目负责人"
      style="width:450px;"
      size="large"
      class="mt10 mb10" />
    <a-button type="primary"
      class="buttonColorGreen fr"
      size="large"
      @click="add">新增小组成员</a-button>
    <a-table :columns="columns"
      :dataSource="tableData"
      bordered
      :pagination="false">
      <template v-for="col in ['number', 'objectName', 'objectNum','checkinTime','objectType']"
        :slot="col"
        slot-scope="text, record">
        <div :key="col">
          <a-input v-if="record.editable"
            style="margin: -5px 0"
            :value="text" />
          <template v-else>{{text}}</template>
        </div>
      </template>
      <template slot="operation"
        slot-scope="text, record">
        <div class='editable-row-operations'>
          <span v-if="record.editable">
            <span class="actionButton"
              @click="() => save(record.key)">
              <a-icon type="check-circle" />保存</span>
            <a-divider type="vertical" />
            <span class="actionButton"
              @click="() => cancel(record.key)">
              <a-icon type="close" />取消</span>
          </span>
          <span @click="() => edit(record.key)"
            class="actionButton"
            v-else>
            <a-icon type="check-circle" />修改
            <a-divider type="vertical" />
            <span class="actionButton">
              <a-icon type="close" />删除</span> </span>
        </div>
      </template>
    </a-table>
    <div class="budget-wrap">
      <h3>项目总体费用构成（预算）</h3>
      <div class="budget">
        <p class="center ml25">合同</p>
        <div class="mb10"><span class="mr10">金额</span>
          <a-input style="width:76px;" />
        </div>
        <div><span class="mr15">比例</span><span class="proport">ss</span></div>
      </div>
      <div class="budget ml25 mr50">
        <p class="center">项目总预算</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
      <div class="budget mr10">
        <p class="center">招标费</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
      <div class="budget mr10">
        <p class="center">人力成本</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
      <div class="budget mr10">
        <p class="center">差旅费</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
      <div class="budget mr10">
        <p class="center">管理费</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
      <div class="budget mr10">
        <p class="center">运维费</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
      <div class="budget mr10">
        <p class="center">外协费</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
      <div class="budget mr10">
        <p class="center">其他</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
      <div class="budget mr10">
        <p class="center">税费</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
      <div class="budget ml50">
        <p class="center">利润</p>
        <div class="mb10">
          <a-input style="width:76px;" />
        </div>
        <span class="proport">100%</span>
      </div>
    </div>
    <h3>项目生产进度及人力成本预算计划</h3>
    <a-table :columns="columns2"
      :dataSource="tableData2"
      bordered
      :pagination="false">
      <template v-for="col in ['number', 'aa', 'bb','cc','dd', 'ee','ff','gg']"
        :slot="col"
        slot-scope="text, record">
        <div :key="col">
          <a-input v-if="record.editable"
            style="margin: -5px 0"
            :value="text" />
          <template v-else><span :class="{actionButton:col==='gg'}">
              {{text}}
            </span>
          </template>
        </div>
      </template>
    </a-table>
    <div class="checkinBox sumbitButton">
      <a-button type="primary"
        class="buttonColorGreen"
        size="large">提交</a-button>
      <router-link to="/projectCheckIn">
        <a-button class="buttonColorWhite"
          size="large">取消</a-button>
      </router-link>
    </div>
  </div>
</template>

<script>
const columns = [{   //表格表头
  title: '序号',
  dataIndex: 'number',
  scopedSlots: { customRender: 'number' },
},
{
  title: '人员',
  dataIndex: 'objectName',
  scopedSlots: { customRender: 'objectName' },
},
{
  title: '部门',
  dataIndex: 'objectNum',
  scopedSlots: { customRender: 'objectNum' },
},
{
  title: '岗位',
  dataIndex: 'checkinTime',
  scopedSlots: { customRender: 'checkinTime' },
},
{
  title: '联系方式',
  dataIndex: 'objectType',
  scopedSlots: { customRender: 'objectType' },
},
{
  title: '操作',
  dataIndex: 'operation',
  scopedSlots: { customRender: 'operation' },
}];

const tableData = [//表格数据
  {
    number: '1',
    objectName: '张三',
    objectNum: '研发部',
    checkinTime: '设计',
    objectType: '123',
  },
  {
    number: '2',
    objectName: '李四',
    objectNum: '研发部',
    checkinTime: '开发',
    objectType: '456',
  },
  {
    number: '3',
    objectName: '王五',
    objectNum: '研发部',
    checkinTime: '测试',
    objectType: '789',
  }
];
const columns2 = [{   //表格表头
  title: '序号',
  dataIndex: 'number',
  scopedSlots: { customRender: 'number' },
},
{
  title: '阶段',
  dataIndex: 'aa',
  scopedSlots: { customRender: 'aa' },
},
{
  title: '工作内容',
  dataIndex: 'bb',
  scopedSlots: { customRender: 'bb' },
},
{
  title: '预算',
  dataIndex: 'cc',
  scopedSlots: { customRender: 'cc' },
},
{
  title: '比例',
  dataIndex: 'dd',
  scopedSlots: { customRender: 'dd' },
},
{
  title: '开始时间',
  dataIndex: 'ee',
  scopedSlots: { customRender: 'ee' },
},
{
  title: '完成时间',
  dataIndex: 'ff',
  scopedSlots: { customRender: 'ff' },
},
{
  title: '参与人员',
  dataIndex: 'gg',
  scopedSlots: { customRender: 'gg' },
}];
const tableData2 = [//表格数据
  {
    number: '1',
    aa: '资料收集',
    bb: '需求调研',
    cc: '20.000',
    dd: '2%',
    ee: '2016-01-01',
    ff: '2016-01-10',
    gg: '张三,李四'
  },
  {
    number: '2',
    aa: '资料收集',
    bb: '需求调研',
    cc: '20.000',
    dd: '2%',
    ee: '2016-01-01',
    ff: '2016-01-10',
    gg: '张三,李四'
  },
  {
    number: '3',
    aa: '资料收集',
    bb: '需求调研',
    cc: '20.000',
    dd: '2%',
    ee: '2016-01-01',
    ff: '2016-01-10',
    gg: '张三,李四'
  }
];
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      tableData,
      columns,
      tableData2,
      columns2,
      search: '',
    }
  },
  methods: {
    edit(key) {
      const newData = [...this.tableData]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target.editable = true
        this.tableData = newData
      }
    },
    save(key) {
      const newData = [...this.tableData]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        delete target.editable
        this.tableData = newData
      }
    },
    cancel(key) {
      const newData = [...this.tableData]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        delete target.editable
        this.tableData = newData
      }
    },
    add() {
      let obj = {
        number: '',
        objectName: '',
        objectNum: '',
        checkinTime: '',
        objectType: '',
        editable: true
      }
      this.tableData.push(obj)
    }
  }
}
</script>

<style scoped>
.fr {
  float: right;
  margin-top: 10px;
}
.budget-wrap {
  margin: 30px 0;
}
.budget {
  display: inline-block;
}
.ml25 {
  margin-left: 25px;
}
.mr15 {
  margin-right: 15px;
}
.mr50 {
  margin-right: 50px;
}
.ml50 {
  margin-left: 50px;
}
.proport {
  display: inline-block;
  width: 76px;
  height: 32px;
  font-size: 14px;
  line-height: 32px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
.checkinBox {
  display: flex;
}
.sumbitButton {
  display: flex;
  justify-content: center;
  padding-bottom: 50px;
  margin-bottom: 20px;
}
.sumbitButton button {
  margin: 50px 30px;
}

.actionButton {
  cursor: pointer;
}
</style>
